<template>
  <div style="width: 800px; height: 600px" id="view1"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted () {
    var chartDom = document.getElementById('view1')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      legend: {
        top: 'bottom'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: '面积模式',
          type: 'pie',
          radius: [50, 250],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 27, name: '儿童（1~12周岁）' },
            { value: 20, name: '青少年（13~18周岁）' },
            { value: 23, name: '青壮年（19~40周岁）' },
            { value: 30, name: '中年（41~60周岁）' },
            { value: 20, name: '老年（61~80周岁）' }
          ]
        }
      ]
    }

    option && myChart.setOption(option)
  }
}
</script>

<style>
</style>
